<template>
  <a-card :bordered="false">
    <h3>内容审核记录</h3>
    <ContentFilter ref="contentFilter" :type="2" @onSearch="onSearch"></ContentFilter>
    <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps" :scroll="{ x: 1300 }">
      <span slot="userInfor" slot-scope="text, record"> {{ record.userNickname }}/{{ record.phone }}(社区ID：{{ record.communityId }}) </span>
      <span slot="imageVideo" slot-scope="text, record, index">
        <div v-if="record.contentType == 0" class="image-video-wrapper">
          <template v-if="record.pictureVideo">
            <img class="img" v-for="(item, index) in record.pictureVideo.split(',').slice(0, 1)" :src="item" alt="" @click="handleShowImg(index, record.pictureVideo.split(','))" :key="index" />
            <div class="img-num">{{ record.pictureVideo.split(',').length }}张</div>
          </template>
        </div>
        <img
          v-else
          class="image-video-wrapper img"
          @click="handlePreview(record.pictureVideo)"
          :src="record.cover"
          alt=""
        />
      </span>
      <span slot="status" slot-scope="text, record, index">
        <span v-if="record.status == 0">人审通过</span>
        <span v-if="record.status == 1">人审不通过</span>
        <span v-if="record.status == 2">机审通过</span>
        <span v-if="record.status == 3">机审不通过</span>
        <!-- 0通过  1不通过  2机审通过  3机审不通过 -->
        
        <div style="color: #999;font-size: 12px;" v-if="record.status == 1 && record.auditWhy">原因：{{record.auditWhy}}<template v-if="record.auditNote">({{record.auditNote}})</template></div>
        <div style="color: #999;font-size: 12px;" v-if="record.status == 3 && record.literalNote">原因：{{ record.literalNote }}</div>
      </span>
      <span slot="content" slot-scope="text, record">
        <p style="font-weight: bold;">{{ record.contentTitle }}</p>
        <a-popover :overlayStyle="{ width: '380px', height: 'auto' }">
          <template slot="content">
            <p style="word-break: break-all;">{{ record.bodyContent }}</p>
          </template>
          <span class="remarks">{{ record.bodyContent }}</span>
        </a-popover>
      </span>
      <span class="img-wrapper" slot="productList" slot-scope="text, record, index">
        <template  v-if="record.communityTopicAssGoodsDtoList.length">
        <div class="img-list" @click="handleShowProductList(record.communityTopicAssGoodsDtoList)">
          <template v-for="(item, index) in record.communityTopicAssGoodsDtoList.slice(0, 3)" >
            <img class="img" v-if="item.image" :src="item.image" alt="" :key="index" />
            <img class="img" v-else src="https://picttype1.jnby.com/community/goods/pl-goods.png" alt="" :key="'place'+index" />
          </template>
        </div>
        <div class="img-text" @click="handleShowProductList(record.communityTopicAssGoodsDtoList)">共{{ record.communityTopicAssGoodsDtoList.length }}件</div>
        </template>
      </span>
      <span slot="topicName" slot-scope="text, record">
        <a-tag color="#2db7f5" v-if="record.topicName">#{{ record.topicName }}</a-tag>
        <span v-else>/</span>
      </span>
      <span slot="action" slot-scope="text, record">
        <a @click="handleDetailsModal(record.id)">内容快照</a>
      </span>
    </s-table>
    <ParagraphPic :current="imgCurrent" :visible.sync="imgVisible" :imgs="imgs"></ParagraphPic>
    <PreviewVideo :visible.sync="previewVisible" :videoUrl="videoUrl"></PreviewVideo>
    <ExamineOrDetailsModal :type="3" :bodyContent="bodyContent" :pictureVideo="pictureVideo" :details.sync="details" :visible.sync="examineOrDetailsVisible"></ExamineOrDetailsModal>
    <ProductListModal :visible.sync="productVisible" :productList="productList"></ProductListModal>
  </a-card>
</template>
<script>
import { contentAuditRecordsPage, contentDetails, auditDetails } from '@/api/micromall/communityContent'
import { STable } from '@/views/box/components'
import ContentFilter from '../../components/ContentFilter'
import ParagraphPic from '../../components/ParagraphPic'
import PreviewVideo from '../../components/PreviewVideo'
import ExamineOrDetailsModal from '../../components/ExamineOrDetailsModal'
import ProductListModal from '../../components/ProductListModal'
const columns = [
  {
    title: '内容ID',
    width: '100px',
    align: 'center',
    dataIndex: 'contentId'
  },
  {
    title: '图片/视频',
    width: '200px',
    align: 'center',
    scopedSlots: { customRender: 'imageVideo' }
  },
  {
    title: '内容文案',
    width: '380px',
    align: 'center',
    scopedSlots: { customRender: 'content' }
  },
  {
    title: '关联商品',
    width: '280px',
    align: 'center',
    scopedSlots: { customRender: 'productList' }
  },
  {
    title: '关联话题',
    width: '180px',
    align: 'center',
    scopedSlots: { customRender: 'topicName' }
  },
  {
    title: '发布人',
    width: '200px',
    align: 'center',
    scopedSlots: { customRender: 'userInfor' }
  },
  {
    title: '审核结果',
    width: '260px',
    align: 'center',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '内容定级',
    width: '120px',
    align: 'center',
    dataIndex: 'contentLevel'
  },
  {
    title: '审核人',
    width: '120px',
    align: 'center',
    dataIndex: 'auditName'
  },
  {
    title: '审核时间',
    width: '120px',
    align: 'center',
    dataIndex: 'createTime'
  },
  {
    title: '操作',
    width: '150px',
    align: 'center',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    ContentFilter,
    STable,
    ParagraphPic,
    PreviewVideo,
    ExamineOrDetailsModal,
    ProductListModal
  },
  data() {
    return {
      bodyContent: '',
      pictureVideo: [],
      details: {},
      examineOrDetailsVisible: false,
      videoUrl: '',
      previewVisible: false,
      productVisible: false,
      imgCurrent: 0,
      imgVisible: false,
      imgs: [],
      productList: [
      ],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      columns,
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
        // onShowSizeChange: (current, pageSize) => this.changePageSize(current, pageSize)
      },
      queryParam: {},

      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const data = {
          ...this.queryParam,
          current: parameter.pageNo,
          size: parameter.pageSize,
        }
        return contentAuditRecordsPage(data).then(res => {
          if (res.code === 200) {
            const { records, total, size, current } = res.data
            const data = {
              page: {
                count: total,
                pageNo: current,
                pageSize: size,
                pages: Math.ceil(total / size)
              },
              data: records
            }
            return data
          } else {
            this.$message.error(res.msg)
            const data = {
              page: {
                count: 0,
                pageNo: 0,
                pages: 0
              },
              data: []
            }
            return data
          }
        })
      }
    }
  },
  created() {},
  computed: {},
  mounted() {},
  watch: {},
  methods: {
    // 详情(弹窗)
    handleDetailsModal(id) {
      this.examineOrDetailsVisible = true
      this.details = {}
      auditDetails({ id }).then(res => {
        if (res.code === 200) {
         const {bodyContent, pictureReason, id, contentTitle, literalReason, pictureVideo} = res.data
          this.bodyContent = bodyContent
          let currentContentTitle = contentTitle
          const currentPictureReason = pictureReason ? JSON.parse(pictureReason) : []
          if (pictureVideo) {
            this.pictureVideo = pictureVideo.split(',').map(e => {
              const index = currentPictureReason.map(i => i.url).indexOf(e)
              return {
                url: e,
                explain: index >=0 ? currentPictureReason[index].explain : '',
                isViolations: currentPictureReason.map(i => i.url).includes(e)
              }
            })
          }
          if (literalReason) {
            literalReason.split(',').forEach(e => {
              if (e) {
                currentContentTitle = currentContentTitle.replace(new RegExp(e,'g'), `<span style="color: red;">${e}</span>`)
                this.bodyContent = this.bodyContent.replace(new RegExp(e,'g'), `<span style="color: red;">${e}</span>`)
              }
            })
          }
          this.details = {...res.data, contentTitle: currentContentTitle}
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 展示关联商品
    handleShowProductList(productList) {
      this.productList = productList
      this.productVisible = true
    },

    // 预览视频
    handlePreview(url) {
      this.videoUrl = url
      this.previewVisible = true
    },

    //搭配内商品
    handleShowCurrentProductList(list) {
      this.productList = list
      this.productVisible = true
    },

    // 查看大图
    handleShowImg(index, productImgList) {
      this.imgCurrent = index
      this.imgVisible = true
      this.imgs = productImgList
    },

    //查询
    onSearch(obj) {
      this.queryParam = obj
      this.$refs.table.refresh(true)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-tabs-bar {
  margin-bottom: 0;
}

.img-wrapper {
  display: flex;

  .img-list {
    display: flex;
  }

  .img-text {
    line-height: 60px;
    color: #999;
  }
}

.img {
  display: block;
  margin: 0 2px;
  width: 60px;
  height: 60px;
  border: 1px dashed #f5f5f5;
  object-fit: scale-down;
  cursor: pointer;
}

.remarks {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  word-break: break-all; /* 追加这一行代码 */
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.product {
  display: flex;
  overflow: hidden;
  .img {
    margin: 0;
  }
  .product-name {
    flex: 1;
    margin-left: 5px;
    width: 80px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    word-break: break-all; /* 追加这一行代码 */
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
  }
}
.product-list {
  .product-item {
    line-height: 18px;
    text-align: left;
  }

  .product-num {
    cursor: pointer;
    text-align: left;
  }
}
.content-record {
  position: absolute;
  right: 0;
  top: 15px;
}
.image-video-wrapper {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  .img-num {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    line-height: 18px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
  }
}
</style>
